<!-- 个人中心 -->

<template>
	<view class="container">
		<view class="head">
			<view class="avatar">
				<image class="avaImg" :src="userinfo? userinfo.avatarUrl :'../../static/images/default.png'" mode=""></image>
				<view class="btn" v-if="userinfo == null"  @click="login">登录</view>
				<view class="" v-else @click="login">{{userinfo.nickName}}</view>
			</view>
			<view class="" @click="toPath('/pages/userinfo/index')" > <image class="editImg" src="../../static/images/edit1.jpg" mode=""></image> 编辑  <text class="icon arrow"></text> </view>
		</view>
		<view class="navList">
			<view class="navItem border0" @click="toPath('/pages/notice/index')">
				<view class="flex flex-aic">
					<image class="iconImg" src="../../static/images/msg.png" mode=""></image>
					<view class="">我的消息</view>
				</view>
				<view class="icon arrow"><image class="notice" src="../../static/images/notice.png" mode=""></image></view>
			</view>
			<view class="navChildList">
				<view class="navClildItem" style="background-color: #6aa1a6;" @click="toPath('/pages/symptom/index')">我的症状</view>
				<view class="navClildItem" style="background-color: #ffb526;" @click="toPath('/pages/prescription/index')">我的处方</view>
				<view class="navClildItem" style="background-color: #81bf40;" @click="toPath('/plugins/newList/newList?type=collection')">我的收藏</view>
				<view class="navClildItem" style="background-color: #e47d5a;" @click="toPath('/plugins/diary/index')">我的日记</view>
				<view class="navClildItem" style="background-color: #a171bd;" @click="toPath('/plugins/selfevaluation/index')">我的量表</view>
				<view class="navClildItem" style="background-color: #77be72;" @click="toPath('/plugins/monitoringindex/index')">我的监测</view>
			</view>
			<button class="navItem mt20" open-type="contact">
				<view class="flex flex-aic">
					<image class="iconImg" src="../../static/images/service.png" mode=""></image>
					<view class="">联系客服</view>
				</view>
				<view class="icon arrow"></view>
			</button>
			<view class="navItem" @click="toPath('/pages/feedback/index')">
				<view class="flex flex-aic">
					<image class="iconImg" src="../../static/images/edit1.jpg" mode=""></image>
					<view class="">意见反馈</view>
				</view>
				<view class="icon arrow"></view>
			</view>
		</view>
		<tabber :selected='2'></tabber>
	</view>
</template>

<script>
	import tabber from '../../components/tabber/index.vue'
	
	export default {
		name:"",
		data() {
			return {
				userinfo:null
			}
		},
		props:{
			
		},
		components:{
			tabber
		},
		onLoad() {
	
		},
		onShow() {
			let userinfo = uni.getStorageSync('userinfo');
			if(userinfo){
				this.userinfo = userinfo;
			}
		},
		methods: {
			
			
			// 用户登录
			login(){
				this.$utils.getUserInfo();
			},
			/**
			 * @func toPath  页面跳转
			 * @param {String} url 跳转路径
			 */
			toPath(url){
				if(!this.$utils.isLogin()){
					return false;
				}
				this.$routeJump.navigateTo(url);
			}
		},
		onShareAppMessage() {}
	}
	
</script>

<style lang="scss" scoped>
	.container{
		padding: 40rpx 30rpx 150rpx;
		.head{
			width: 100%;
			height: auto;
			@include flex(space-between,center);
			.avatar{
				flex: 1;
				@include flex('',center);
				.avaImg{
					margin-right: 20rpx;
					@include img(96rpx,96rpx,50%);
				}
				.btn{
					background-color: $uni-theme-color;
				}
			}
		}
		.navList{
			padding: 30rpx 0;
			.navItem{
				height: 96rpx;
				line-height: 96rpx;
				@include flex(space-between,center);
				padding: 0;
				margin: 0;
				background-color: #FFFFFF;
				border-radius: 0;
				font-size: 32rpx;
				color: #000;
				border-bottom: 1rpx solid #ddd;
				.notice{
					width: 68rpx;
					height: 58rpx;
					vertical-align: middle;
				}
				.iconImg{
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
			}
		}
		.navChildList{
			width: 100%;
			height: 260rpx;
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-template-rows: repeat(2,1fr);
			grid-gap:20rpx;
			.navClildItem{
				line-height: 120rpx;
				text-align: center;
				border-radius: 16rpx;
				color: #fff;
				font-weight: bold;
				background-color: #F1F1F1;
				
			}
		}
	}
</style>
